let dataList = [
    {
        img: '../images/soft01.png',
        title: 'TimeCamp for iPhone',
        txt: 'Official app for iPhone.Get on App Store.'
    },
    {
        img: '../images/soft02.png',
        title: 'TimeCamp for Android',
        txt: 'Official app for Android.Get on Google Play.'
    },
    {
        img: '../images/soft03.png',
        title: 'Chrome Extension',
        txt: 'Official app for Google Chrome.'
    },
    {
        img: '../images/soft04.png',
        title: 'ActiveCollab',
        txt: 'Import all your tasks to TimeCamp'
    },
    {
        img: '../images/soft05.png',
        title: 'Asana',
        txt: 'Import all your tasks to TimeCamp'
    },
    {
        img: '../images/soft06.png',
        title: 'Azure DevOps',
        txt: 'Import all your projects to TimeCamp'
    },
    {
        img: '../images/soft07.png',
        title: 'Breeze',
        txt: 'Import all your projects to TimeCamp'
    },
    {
        img: '../images/soft08.png',
        title: 'Calendar',
        txt: 'Import all your events directly to TimeCamp'
    },
    {
        img: '../images/soft09.png',
        title: 'ClickUp',
        txt: 'Import all your to -do lists to TimeCamp'
    },
    {
        img: '../images/soft010.png',
        title: 'Dropbox Paper',
        txt: 'Import all your folders and files to TimeCamp'
    },
    {
        img: '../images/soft01.png',
        title: 'TimeCamp for iPhone',
        txt: 'Official app for iPhone.Get on App Store.'
    },
    {
        img: '../images/soft02.png',
        title: 'TimeCamp for Android',
        txt: 'Official app for Android.Get on Google Play.'
    },
    {
        img: '../images/soft03.png',
        title: 'Chrome Extension',
        txt: 'Official app for Google Chrome.'
    },
    {
        img: '../images/soft04.png',
        title: 'ActiveCollab',
        txt: 'Import all your tasks to TimeCamp'
    },
    {
        img: '../images/soft05.png',
        title: 'Asana',
        txt: 'Import all your tasks to TimeCamp'
    },
    {
        img: '../images/soft06.png',
        title: 'Azure DevOps',
        txt: 'Import all your projects to TimeCamp'
    },
    {
        img: '../images/soft07.png',
        title: 'Breeze',
        txt: 'Import all your projects to TimeCamp'
    },
    {
        img: '../images/soft08.png',
        title: 'Calendar',
        txt: 'Import all your events directly to TimeCamp'
    },
    {
        img: '../images/soft09.png',
        title: 'ClickUp',
        txt: 'Import all your to -do lists to TimeCamp'
    },
    {
        img: '../images/soft010.png',
        title: 'Dropbox Paper',
        txt: 'Import all your folders and files to TimeCamp'
    },
    {
        img: '../images/soft01.png',
        title: 'TimeCamp for iPhone',
        txt: 'Official app for iPhone.Get on App Store.'
    },
    {
        img: '../images/soft02.png',
        title: 'TimeCamp for Android',
        txt: 'Official app for Android.Get on Google Play.'
    },
    {
        img: '../images/soft03.png',
        title: 'Chrome Extension',
        txt: 'Official app for Google Chrome.'
    },
    {
        img: '../images/soft04.png',
        title: 'ActiveCollab',
        txt: 'Import all your tasks to TimeCamp'
    },
    {
        img: '../images/soft05.png',
        title: 'Asana',
        txt: 'Import all your tasks to TimeCamp'
    },
    {
        img: '../images/soft06.png',
        title: 'Azure DevOps',
        txt: 'Import all your projects to TimeCamp'
    },
    {
        img: '../images/soft07.png',
        title: 'Breeze',
        txt: 'Import all your projects to TimeCamp'
    },
    {
        img: '../images/soft08.png',
        title: 'Calendar',
        txt: 'Import all your events directly to TimeCamp'
    },
    {
        img: '../images/soft09.png',
        title: 'ClickUp',
        txt: 'Import all your to -do lists to TimeCamp'
    },
    {
        img: '../images/soft010.png',
        title: 'Dropbox Paper',
        txt: 'Import all your folders and files to TimeCamp'
    },
    {
        img: '../images/soft01.png',
        title: 'TimeCamp for iPhone',
        txt: 'Official app for iPhone.Get on App Store.'
    },
    {
        img: '../images/soft02.png',
        title: 'TimeCamp for Android',
        txt: 'Official app for Android.Get on Google Play.'
    },
    {
        img: '../images/soft03.png',
        title: 'Chrome Extension',
        txt: 'Official app for Google Chrome.'
    },
    {
        img: '../images/soft04.png',
        title: 'ActiveCollab',
        txt: 'Import all your tasks to TimeCamp'
    },
    {
        img: '../images/soft05.png',
        title: 'Asana',
        txt: 'Import all your tasks to TimeCamp'
    },
    {
        img: '../images/soft06.png',
        title: 'Azure DevOps',
        txt: 'Import all your projects to TimeCamp'
    },
    {
        img: '../images/soft07.png',
        title: 'Breeze',
        txt: 'Import all your projects to TimeCamp'
    },
    {
        img: '../images/soft08.png',
        title: 'Calendar',
        txt: 'Import all your events directly to TimeCamp'
    }
]

let footdata = [
    {
        title: 'Product',
        con: [
            'Features',
            'Integrations',
            'Desktop app',
            'Time tracking Android app',
            'Time tracking iOS app'
        ]
    }, {
        title: 'Support',
        con: [
            'Support',
            'Knowledge base',
            'Developers API',
            'Product updates',
            'Server Status',
            'Features',
            'Press',
            'Customer Stories'
        ]
    }, {
        title: 'Integrations',
        con: [
            'Trello',
            'Podio',
            'Asana',
            'Calendar',
            'Insightly',
            'Zapier',
        ]
    }, {
        title: 'Resources',
        con: [
            'Blog',
            'Contact',
            'Sitemap',
            'HeySpace',
            'Other resources',
            'Jobs'
        ]
    }
]

$(function () {
    addData();
    footer();
    show();
    active();
})

function active() {
    $('header .nav-link').click(function () {
        $(this).addClass('active').parent().siblings().children().removeClass('active');
    })
}

function addData() {
    for (var i = 0; i < dataList.length; i++) {
        var _li = `
        <li class="col-12 col-sm-6 col-md-4">
                <div class="media">
                    <img src=${dataList[i].img} class="mr-3" alt="...">
                    <a href="#" class="text-decoration-none">
                        <div class="media-body">
                            <h5 class="mt-0">${dataList[i].title}</h5>
                            <p class=" font-weight-light">${dataList[i].txt}</p> 
                        </div>
                    </a>

                </div>
            </li>
        `
        $('#soft ul').append(_li);
    }
}

function addli(content) {
    let li = '';
    content.forEach(item => {
        li += `
        <li>
            <a href="#">${item}</a>
        </li>
    `
    })
    return li;
}

// 加载底部数据
function footer() {
    footdata.forEach(element => {
        let div = `
        <div class="col-sm-3 col-12 text-center text-sm-left">
            <p>${element.title}</p>
            <ul class="list-unstyled">
                 ${addli(element.con)}
            </ul>
        </div>
        `;
        $('footer .row').eq(0).append(div);
    });
}

function show() {
    // 显示
    $('.server').eq(0).click(function () {
        $('.dialog').eq(0).animate({ height: '625px', width: '310px' }, 100).show(100);
        $('.server').eq(0).hide(200);
    })
    sendMess();
    // 关闭
    $('#closes').click(function () {
        $('.dialog').eq(0).animate({ height: '0px', width: '0px' }).fadeOut(1000);
        $('.server').eq(0).show();
    })
}

function sendMess() {
    $('#send-msg').keydown(function (e) {
        // console.log(e.keyCode);
        if (e.keyCode == 13) {
            addTag();
        }
    })

    $('#send').click(function () {
        addTag();
    })
}

function addTag() {
    var date = new Date();
    var txt = $('#send-msg').val();
    var time = date.getHours() + ':' + date.getMinutes();
    if (txt === '') {
        alert('can not be null');
        return false;
    }
    var tag = `
        <li class="you text-right">
            <p class="tip mb-0">You
                <span class="d-inline-block">${time}</span>
            </p>
            <p class="mb-0 content">${txt}</p>
            <span class="d-block active">error!</span>
        </li>
        `;
    $('footer .middle-con').eq(0).append(tag);
    $('#send-msg').val('');
}